<html>
<head>
    <title>用户管理</title>
    <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">

    <style>
        body {
            background: #F2F2F2;
        }


        .main-head {
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer {
            height: 200px;
        }


    </style>
</head>
<body>
<div class="page" id="page-monitor">

    <div class="page-title">实时视频</div>
    <div class="page-main">
        <el-row>
            <el-col :span="4">
                <el-menu class="el-menu-vertical-demo" @select="handleSelect" background-color="#ecf8ff">
                    <template v-if="videoData">
                        <el-menu-item v-for="(item, index) in videoData" :index="index">
                            <i class="el-icon-video-camera-solid"></i>
                            <span slot="title">{{item.CaptorName}}</span>

                        </el-menu-item>
                    </template>
                </el-menu>
            </el-col>
            <el-col :span="20">
                <div class="main-head">
                    <div id="myDivPlayer"></div>
                </div>
            </el-col>
        </el-row>
    </div>
</div>
<script src="https://open.ys7.com/sdk/js/1.3/ezuikit.js"></script>

<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>


<script>

    var vuePage = new Vue({
        el: '#page-monitor',
        data: {
            videoData: []
        },
        methods: {
            handleSelect(key) {
               if (this.videoData[key].State == 3) {
                    let param = {
                        cameraCode: this.videoData[key].Url2,//设备序列号
                        protocol: 'rtmp',//
                    }
                    HttpUtil.get('HikVideo/previewUrl', param).success((r) => {
                        let str = '<video id="myPlayer" style=" height: 100%;width:100%;min-width:320px;min-height:500px;" poster="" controls playsInline webkit-playsinline autoplay><source src="' + r.data.url + '" type="application/x-mpegURL" /></video>';
                        $("#myDivPlayer").html(str)
                        setTimeout(() => {
                            let _videoPlayer = new EZUIPlayer('myPlayer');
                            _videoPlayer.play();
                        }, 0)
                    })
                }else {
                   let html = '<video id="myPlayer" style="height:90%;width:100%; min-width:320px;min-height:320px;" poster="" controls playsInline webkit-playsinline autoplay><source src="' + this.videoData[key].Url1 + '" type="" /> <source src="' + this.videoData[key].Url2 + '" type="application/x-mpegURL" /></video>';
                   $("#myDivPlayer").html(html);
                   setTimeout(() => {
                       let _videoPlayer = new EZUIPlayer('myPlayer');
                       _videoPlayer.play();
                   }, 0)
               }
               //      let html = '<video id="myPlayer" style="height:90%;width:100%; min-width:320px;min-height:320px;" poster="" controls playsInline webkit-playsinline autoplay><source src="http://111.6.27.9:83/openUrl/8Imgg9O/live.m3u8" type="" /> <source src="http://111.6.27.9:83/openUrl/8Imgg9O/live.m3u8"  /></video>';
               //      $("#myDivPlayer").html(html);
               //      setTimeout(() => {
               //          let _videoPlayer = new EZUIPlayer('myPlayer');
               //          _videoPlayer.play();
               //      }, 0)

            },
        },
        created: function () {

        },
        mounted: function () {
            HttpUtil.get('VideoCaptor/list', {
                projectNo: SiteConfig.account.projectNo,
                pagesize: 200
            }).success((res) => {
                this.videoData = res.data
                this.handleSelect(0)
            })
        }
    });


</script>

</body>
</html>
